<!--
 * @Description  : 基础目录
 * @Autor        : 杜康
 * @Date         : 2023-03-03 15:36:06 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-03-17 17:46:08 +0800
-->
<template>
  <section class="menus">
    <el-menu
      :default-active="$route.path"
      :collapse="isCollapse"
      :collapse-transition="false"
      active-text-color="#ffd04b"
      background-color="#1c2b36"
      text-color="#fff"
      @select="handleSelect"
      :unique-opened="true"
    >
      <template v-for="(item, index) in adminMenu" :key="index">
        <el-menu-item v-if="!item.noDropdown && isEmpty(item.children)" :index="item.path">
          <i class="fa fa-1x" :class="item.icon"></i>
          <template #title><span class="ml5" v-text="item.name"></span></template>
        </el-menu-item>
        <el-sub-menu v-if="item.noDropdown" :index="item.path">
          <template #title>
            <i class="fa fa-1x" :class="item.icon"></i>
            <span class="ml5" v-text="item.name"></span>
          </template>
          <template v-for="(cItem, cIndex) in item.children" :key="cIndex">
            <el-menu-item
              v-if="cItem.isEnabled && isEmpty(cItem.children)"
              :index="cItem.path"
              v-text="cItem.name"
            ></el-menu-item>
            <el-sub-menu v-if="!isEmpty(cItem.children)" :index="cItem.path">
              <template #title><span v-text="cItem.name"></span></template>
              <el-menu-item
                v-for="(ccItem, ccIndex) in cItem.children"
                :key="ccIndex"
                :index="ccItem.path"
              >
                <span v-text="ccItem.name"></span>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </section>
</template>

<script setup>
import adminMenu from "@/assets/menus/adminMenu.js";
import { isEmpty } from "lodash";
import { ref, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
const isCollapse = inject("isCollapse");

const router = useRouter();
const route = useRoute();

const handleSelect = (key, keyPath) => {
  router.push({
    path: key
  });
};
</script>

<style lang="less" scoped>
.menus {
  position: relative;
  height: 100%;
  width: 100%;
  .el-menu {
    border-right: none;
    height: 100%;
    width: 100%;
  }
}
.fa {
  width: 24px;
  font-size: 16px;
  vertical-align: middle;
}
.ml5 {
  margin-left: 5px;
}
</style>
